﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>UI Helper Method Tests</title>
		<link href="../Common/Styles/qunit.css" type="text/css" rel="stylesheet" />
		
		<script src="../Common/Scripts/JQuery/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjax.debug.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.ext.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.model.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mapper.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.view.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.ui.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mock.js" type="text/javascript"></script>
		<script src="../Common/Scripts/mock-driver.js" type="text/javascript"></script>
		<script type="text/javascript">
			var context = ExoWeb.context({ model: { driver: { id: "1", from: "Driver", and: ["this.Owner.Location.Address.State", "this.Cars", "this.Dealer", "this.Dealer.AvailableCars"]} } });

			// reference the immediate parent dataview's data when that dataview is bound to a single object
			////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			setupTest("test1", { description: "$parentContextData - Single hop with lone objects bound to parent dataview", expect: 2 }, function(result) {
				ok(result, "Result should be defined.");
				ok(result instanceof Dealer, "Result should be a Dealer");
			});
			
			// reference an ancestor dataview's data when that dataview is bound to a single object
			////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			setupTest("test2", { description: "$parentContextData - Double hop with lone objects bound to parent dataview", expect: 2 }, function(result) {
				ok(result, "Result should be defined");
				ok(result instanceof Driver, "Result should be a Driver");
			});

			// reference the immediate parent dataview's data when the parent dataview is bound to a list (i.e.: list index)
			////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			setupTest("test3-0", { description: "$parentContextData - Single hop with list of objects bound to parent dataview - 1", expect: 3 }, function(result) {
				ok(result, "Result should be defined");
				ok(result.meta.type == OwnerLocation.meta, "Result should be an OwnerLocation");
				equals(result.meta.id, 1, "Result's id should be 1");
			});
			setupTest("test3-1", { description: "$parentContextData - Single hop with list of objects bound to parent dataview - 2", expect: 3 }, function(result) {
				ok(result, "Result2 should be defined");
				ok(result.meta.type == OwnerLocation.meta, "Result should be an OwnerLocation");
				equals(result.meta.id, 2, "Result's id should be 2");
			});

			timeoutTests(3000);

			window.onerror = function(e) {
				alert("Error encountered: " + e);
				timeoutTests(0);
			};
		</script>
	</head>
	<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
		
		<!-- QUnit Display -->
		<h1 id="qunit-header">Test Results:</h1>
		<h2 id="qunit-banner"></h2>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>
		
		<div id="driver" class="sys-template" sys:attach="dataview" dataview:data="{~ context.model.driver }">
			<h3>{binding Name}</h3>
			<div id="dealer" class="sys-template" sys:attach="dataview" dataview:data="{~ Dealer }">
				<div>Dealer: <span>{binding Name}</span></div>
				<br />
				
				Available Cars:
				<ul class="sys-template" sys:attach="dataview" dataview:data="{{ executeTest('test1', $parentContextData($element)).get_AvailableCars() }}">
					<li>Car <span>{{ $dataItem.meta.id }}</span></li>
				</ul>
				
				Driver's Cars:
				<ul id="driverList" class="sys-template" sys:attach="dataview" dataview:data="{{ executeTest('test2', $parentContextData($element, $index, 2)).get_Cars() }}">
					<li>Car <span>{{ $dataItem.meta.id }}</span></li>
				</ul>
				
			</div>
			
			Owner's Locations:
			<ul class="sys-template" sys:attach="dataview" dataview:data="{~ Owner.AvailableLocations }">
				<li>
					Available Location - 
					<span class="sys-template" sys:attach="dataview" dataview:data="{{ executeTest('test3-' + $index, $parentContextData($element, $index)).get_Address() }}">
						{binding State.Name}
					</span>
				</li>
			</ul>
		</div>
	</body>
</html>
